<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老师页面</title>
    <link rel="shortcut icon" href="/img/xuexi.png">
</head>
<style>
    .container {
        width: 100%;
        height: 1000px;


    }

    div>img {
        width: 100%;
        height: 300px;
        display: block;
    }

    .personal {
        position: absolute;
        top: 1px;
        width: 500px;
        height: 300px;

        float: left;
        left: 450px;
    }

    .tu01 {
        float: left;
        width: 150px;
        height: 100%;

    }

    .tu {
        position: absolute;
        top: 25px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid;
    }

    .biao {
        margin-top: 20px;
    }


    p {
        display: inline-block;


    }


    .table {
        border: 1px solid;
        height: 50px;

        background-color: #008c8c;

    }

    .container_2 {
        width: 73%;
        height: 100%;
        float: right;
        margin-top: 15px;
        border: 5px solid #ccc;
    }

    .table_container {
        width: 100%;
        float: right;
        margin-top: 15px;
    }

    .inputall {
        float: right;
        position: absolute;
        margin-top: -43px;
        position: relative;
        height: 24px;
        margin-left: 1300px;

    }

    .banji {
        position: relative;
        width: 100%;
        height: 50px;
        top: -35px;
        text-align: center;
        background-color: sandybrown;
    }

    .ban1 {
        padding-top: 15px;
        float: left;
        width: 49%;

    }

    .bang {
        border-right: 2px solid black;
        height: 35px;
    }

    #headimg {
        /* position: absolute; */
        /* top: 25px; */

        border-radius: 50%;
        border: 1px solid rgb(121, 115, 115);
        display: block;
        position: relative;
        top: 10px;
    }

    .let {
        float: left;
        width: 24%;
        height: 200px;
        margin-top: 15px;
        border: 1px, solid, #008c8c;
    }

    .text {
        width: 250px;
        height: 50px;

    }

    .butten {
        width: 90px;
        height: 50px;
    }

    .hang {
        margin-top: 50px;
    }
</style>

<body>
    <div class="container">
        <img src="img/login.jpg" alt="">
        <div class="personal">
            <div class="tu01">
                <img src="img/touxiang.png" alt="" style="height: 100px;width: 100px" id="headimg">
                <input type="file" name="headpic" id="headpic" οnchange="uphead(this)"
                    style="position: absolute;opacity: 0;cursor: pointer;height: 100px;width: 100px;left: 15px;top: 0px;">
            </div>
            <ul>
                <li class="biao">姓名：<input type="text" value="  "></li>
                <li class="biao">学号：<input type="text" value="  "></li>
                <li class="biao">学院：<input type="text" value="  "></li>
                <li class="biao">专业：<input type="text" value="  "></li>
            </ul>
        </div>
        <div class="banji">
            <div class="ban1 bang">16工程班</div>
            <div class="ban1">16科技班</div>
        </div>


        <div class="let">
            <input id="chaxun" type="text" style="margin-top: 37px;" class="text" placeholder="可以查询实验名称，姓名，学号">
            <input id="brn_chaxun" type="text" style=" text-align: center; margin-top: 37px;" class="butten" value="查询">
            <div class="hang">
                <input id="add" type="text" class="text" placeholder="请输入要添加的实验">
                <input id="btn_add" type="text" class="butten" style="text-align: center;" value="添加实验"></div>

            <div class="hang">
                <input id="dele" type="text" class="text" placeholder="请输入要删除的实验名称">
                <input id="btn_dele" type="text" class="butten" style="text-align: center;" value="删除实验"></div>


        </div>

        <div class="container_2">
            <div class="table_container">

                <div class="table">
                    <p>姓名：高恒<p class="zhi2"> </p> 学号：<p class="zhi2"> 20161102537 </p>
                    </p> <input class="inputall" type="text" value="评分:">
                </div>
                <div class="table">
                    <p>姓名： <p class="zhi2"> </p> 学号：<p class="zhi2"> </p>
                    </p> <input class="inputall" type="text" value="评分:">
                </div>
                <div class="table">
                    <p>姓名： <p class="zhi2"> </p> 学号：<p class="zhi2"> </p>
                    </p> <input class="inputall" type="text" value="评分:">
                </div>
                <div class="table">
                    <p>姓名： <p class="zhi2"> </p> 学号：<p class="zhi2"> </p>
                    </p> <input class="inputall" type="text" value="评分:">
                </div>
                <div class="table">
                    <p>姓名： <p class="zhi2"> </p> 学号：<p class="zhi2"> </p>
                    </p> <input class="inputall" type="text" value="评分:">
                </div>
                <div class="table">
                    <p>姓名： <p class="zhi2"> </p> 学号：<p class="zhi2"> </p>
                    </p> <input class="inputall" type="text" value="评分:">
                </div>
                <div class="table">
                    <p>姓名： <p class="zhi2"> </p> 学号：<p class="zhi2"> </p>
                    </p> <input class="inputall" type="text" value="评分:">
                </div>
            </div>
        </div>

    </div>
    <script>
        const URL = "http://localhost:3000";

        $(function () {
            //页面启动时显示所有已提交人员信息
            getAllGCdata();
            $('.bang').click(function () {
                getAllGCdata();
            })
        }

        )


        //向后台发起请求，请求添加已提交人员信息
        function getAllGCdata() {

            $ajax({ url: `${url}getAllGC` }).then(data => {
                console.log('获取信息成功：', data);
                showGCData(data.body);
            }, err => {
                console.log('获取信息失败：', err);
                alert('服务器出错，请稍后再试');
            });

        }


        //显示已提交人员的信息
        function showGCData(arr) {
            $("div.table_container").empty();
            arr.forEach(item => {
                let $div = $('<div></div>');
                $('<div></div>').addClass("table")
            })
        };




        function uphead(event) {
            //获取展示图片的区域                         
            var img = document.getElementById("headimg");
            //获取文件对象                                
            let file = event.files[0];
            //获取文件阅读器                              
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //给img的src设置图片url                      
                img.setAttribute("src", this.result);
            }
        }
      //进入页面时应该 先显示已提交同学的列表

    </script>
</body>

</html>